import React, { Component } from 'react';
import { connect } from 'dva';

import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';

import {
  Row, Col, Card, Input, Select,
} from 'antd';

const { Option } = Select;

interface BasicInfoProps {
  detailInfo: any;
  forms: object;
}

interface BasicInfoState {

}

@connect(({ common }: any) => ({
  INITINFO: common.INITINFO,
}))

class BasicInfoElem extends Component<BasicInfoProps, BasicInfoState> {
  state = {

  }

  componentDidMount() { }


  render() {
    const {
      forms: { getFieldDecorator },
      detailInfo,
    }: any = this.props;

    return (
      <div>
        <Card title="编辑基本信息" bordered={false}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item label="套餐名称" colon={false}>
                {getFieldDecorator('name', ({
                  initialValue: detailInfo.name,
                  rules: [
                    {
                      required: true,
                      message: '请输入套餐名称',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="　　状态" colon={false}>
                {getFieldDecorator('status', ({
                  initialValue: detailInfo.status,
                  rules: [
                    {
                      required: true,
                      message: '请选择状态',
                    },
                  ],
                }))(
                  <Select placeholder="请选择">
                    <Option value={1}>有效</Option>
                    <Option value={2}>无效</Option>
                  </Select>,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Card>
        <Card title="常规价格" bordered={false}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item label="投递价格" colon={false}>
                {getFieldDecorator('columns.use', ({
                  initialValue: detailInfo.columns && detailInfo.columns.use,
                  rules: [
                    {
                      required: true,
                      message: '请输入投递价格',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input placeholder="请输入" style={{ width: '100%' }} suffix="分" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="用户取件价格" colon={false}>
                {getFieldDecorator('columns.user_use', ({
                  initialValue: detailInfo.columns && detailInfo.columns.user_use,
                  rules: [
                    {
                      required: true,
                      message: '请输入用户取件价格',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" style={{ width: '100%' }} suffix="分" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="用户取件价格封顶" colon={false}>
                {getFieldDecorator('columns.limit', ({
                  initialValue: detailInfo.columns && detailInfo.columns.limit,
                  rules: [
                    {
                      required: true,
                      message: '请输入用户取件价格封顶',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input placeholder="请输入" style={{ width: '100%' }} suffix="分" />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Card>
        <Card title="用户取件超时配置" bordered={false}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item label="免费时间" colon={false}>
                {getFieldDecorator('columns.normal_time', ({
                  initialValue: detailInfo.columns && detailInfo.columns.normal_time,
                  rules: [
                    {
                      required: true,
                      message: '请输入用户取件免费时间',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" style={{ width: '100%' }} suffix="小时" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="收费间隔" colon={false}>
                {getFieldDecorator('columns.overtime', ({
                  initialValue: detailInfo.columns && detailInfo.columns.overtime,
                  rules: [
                    {
                      required: true,
                      message: '请输入用户取件收费间隔',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input placeholder="请输入" style={{ width: '100%' }} suffix="小时" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="用户取件超时价格" colon={false}>
                {getFieldDecorator('columns.overtime_price', ({
                  initialValue: detailInfo.columns && detailInfo.columns.overtime_price,
                  rules: [
                    {
                      required: true,
                      message: '请输入用户取件收费间隔',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" style={{ width: '100%' }} suffix="分" />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Card>
        <Card title="投递人取回超时配置" bordered={false}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item label="免费时间" colon={false}>
                {getFieldDecorator('columns.detention_normal_time', ({
                  initialValue: detailInfo.columns && detailInfo.columns.detention_normal_time,
                  rules: [
                    {
                      required: true,
                      message: '请输入免费时间',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" style={{ width: '100%' }} suffix="小时" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="收费间隔" colon={false}>
                {getFieldDecorator('columns.detention_overtime', ({
                  initialValue: detailInfo.columns && detailInfo.columns.detention_overtime,
                  rules: [
                    {
                      required: true,
                      message: '请输入收费间隔',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input placeholder="请输入" style={{ width: '100%' }} suffix="小时" />,
                )}
              </Form.Item>
            </Col>
            <Col md={8} sm={24}>
              <Form.Item label="投递取回超时价格" colon={false}>
                {getFieldDecorator('columns.detention_price', ({
                  initialValue: detailInfo.columns && detailInfo.columns.detention_price,
                  rules: [
                    {
                      required: true,
                      message: '请输入投递取回超时价格',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" style={{ width: '100%' }} suffix="分" />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Card>
        <Card title="快递员积分配置" bordered={false}>
          <Row gutter={{ md: 8, xl: 24, lg: 48 }}>
            <Col md={8} sm={24}>
              <Form.Item label="积分" colon={false} className="marginB0Import">
                {getFieldDecorator('columns.credit', ({
                  initialValue: detailInfo.columns && detailInfo.columns.credit,
                  rules: [
                    {
                      required: true,
                      message: '请输入积分',
                    },
                    {
                      pattern: /^[0-9]+$/,
                      message: '必须为整数',
                    },
                  ],
                }))(
                  <Input allowClear placeholder="请输入" />,
                )}
              </Form.Item>
            </Col>
          </Row>
        </Card>
      </div>
    );
  }
}

export default BasicInfoElem;
